<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>需求单</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">

  <link rel="stylesheet" href="plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
  <link rel="stylesheet" href="plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
  <link type="text/css" rel="stylesheet" charset="UTF-8"
    href="https://translate.googleapis.com/translate_static/css/translateelement.css">
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
  <script src="plugins/jquery/jquery.js"></script>
  <script type="text/javascript">

  </script>
</head>

<body class="hold-transition sidebar-mini">
  <div id="all_one" class="wrapper">
    <!-- /.content-header -->
    <!-- 需求单 -->
    <div id="demand1" class="card-body" style="margin-left: 1%; margin-right: 1%;">
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block"><a href="#" class="nav-link"> <i
                class="fas fa-paw nav-icon"></i>
              <p>黄金品类</p>
            </a></li>
          <li class="nav-item d-none d-sm-inline-block"><a href="#" class="nav-link" onclick="adddemand()"> <i
                class="fas fa-plus nav-icon"></i>
              <p>新增需求单</p>
            </a></li>
          <li id="export" class="nav-item d-none d-sm-inline-block"><a data-type="xls" href="javascript:;"
              class="nav-link"> <i class="fas  fa-random nav-icon"></i>导出
            </a></li>
        </ul>
      </nav>

      <div class="card">
        <!-- /.card-header -->
        <div class="card-body">
          <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">

          </div>
          <div class="row">
            <div class="col-sm-12">
              <table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
                aria-describedby="example1_info">
                <thead class="text-center">
                  <tr role="row">
                    <th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending">序号
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Browser: activate to sort column ascending">单号</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">客户</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">部门</th>

                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">重量</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">数量</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Platform(s): activate to sort column ascending">制单人</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="Engine version: activate to sort column ascending">制单时间</th>
                    <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                      aria-label="CSS grade: activate to sort column ascending">状态</th>

                  </tr>
                </thead>

                <tbody class="text-center">
                  <tr role="row" class="odd" style="display: none;">
                    <td class="" tabindex="0">Gecko</td>
                    <td style="">Epiphany 2.20</td>
                    <td style="">Gnome</td>
                    <td style="">Epiphany 2.20</td>
                    <td style="">Gnome</td>
                    <td style="">Epiphany 2.20</td>
                    <td style="">Gnome</td>
                    <td style="">Gnome</td>
                    <td  style="">1.8</td>
                  </tr>

                  <tr v-for="(demand,index) in demands" role="row" class="odd">
                    <td tabindex="0" class="sorting_1">{{demand.deid}}</td>
                    <td><a href="#" onclick="gotoDetail()" @click="detail(demand.orderno,index)">{{demand.orderno}}</a>
                    </td>
                    <td>{{demand.client}}</td>
                    <td>{{demand.department}}</td>
                    <td>{{demand.weight}}</td>
                    <td>{{demand.num}}</td>
                    <td>{{demand.wname}}</td>
                    <td>{{demand.time}}</td>
                    <td>{{demand.status}}</td>
                  </tr>

                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新增需求单 -->
    <div id="demand2" class="card-body" style="padding: 0px;margin-left: 1%; margin-right: 1%;display: none;">
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <p>新增需求单</p>
            </a>
          </li>

        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-5">
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-2">
          <button class="btn btn-primary" @click="add_need()"><i
              class="fas  fa-edit nav-icon"></i>&nbsp;保存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <button class="btn btn-primary" @click="goneed()"><i class="fas  fa-reply nav-icon"></i>&nbsp;返回</button>
        </ul>

      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light" style="height: 1px;">
        <hr style="height: 0.1px; width: 100%;background-color: lightgray;">
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <i class="fas fa-signal nav-icon"></i>
              <p>基本信息</p>
            </a>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>产品线:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_line">
              <option>A产品线</option>
              <option>B产品线</option>
              <option>C产品线</option>
            </select>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品类:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_category">
              <option>玉石</option>
              <option>黄金</option>
              <option>玛瑙</option>
            </select>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>仓库:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_storehouse">
              <option>A仓库</option>
              <option>B仓库</option>
              <option>C仓库</option>
              <option>D仓库</option>
            </select>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;制单人:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <input type="text" style="height: 40px; width: 200px;" v-model="need_wname">
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar">
          <li class="nav-item d-none d-sm-inline-block">
            <a>审核人:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <input type="text" style="height: 40px; width: 200px;" v-model="need_rname">
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar  ">
          <li class="nav-item d-none d-sm-inline-block">
            <a>成色:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_quality">
              <option>千足金9999</option>
              <option>万足金10000</option>
            </select>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>制单时间:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <input type="datetime-local" class="measureDate" style="height: 40px; width: 200px;" v-model="need_time">
          </li>
        </ul>

        <ul class="navbar-nav nav-sidebar">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_status">
              <option>待分配</option>
            </select>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar  ">
          <li class="nav-item d-none d-sm-inline-block">
            <a>单号:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <input type="text" style="height: 40px; width: 200px;" v-model="need_orderno">
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar" style="margin-left:2%;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重量:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <input type="text" style="height: 40px; width: 200px;" v-model="need_weight">
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar" style="position: relative;left: 20px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>数量:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative;left: 20px;">
          <li class="nav-item d-none d-sm-inline-block">
            <input type="text" style="height: 40px; width: 200px;" v-model="need_num">
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar" style="position: relative;left: -40px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;克工艺效果:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative;left: -40px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_effect">
              <option>拉丝</option>
              <option>电铸</option>
            </select>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar" style="margin-left:1%;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;供应商:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_client">
              <option>中国黄金</option>
              <option>老凤祥</option>
              <option>六福珠宝</option>
              <option>周大福</option>
              <option>盛峰珠宝</option>
              <option>着讯互联</option>
            </select>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;规格:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_specifications">
              <option>12#</option>
              <option>14#</option>
            </select>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar" style="position: relative;left: -10px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部门:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative;left: -10px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_department">
              <option>精品柜A</option>
              <option>精品柜B</option>
              <option>精品柜C</option>
              <option>精品柜D</option>
            </select>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <i class="fas fa-signal nav-icon"></i>
              <p>产品信息</p>
            </a>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <div class="col-sm-12">
          <table id="example2" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
            aria-describedby="example1_info">
            <thead class="text-center">
              <tr role="row">
                <th tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending"
                  aria-label="Rendering engine: activate to sort column descending">操作</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Browser: activate to sort column ascending">产品编码</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">产品名称</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">供应商</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">重量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">数量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">克工艺效果</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="CSS grade: activate to sort column ascending">规格</th>

              </tr>
            </thead>
            <tbody class="text-center">
              <tr role="row" class="odd" style="display: none;">
                <td class="" tabindex="0">Gecko</td>
                <td style="">Epiphany 2.20</td>
                <td style="">Gnome</td>
                <td style="">Epiphany 2.20</td>
                <td style="">Gnome</td>
                <td style="">Epiphany 2.20</td>
                <td style="">Gnome</td>
                <td style="">Gnome</td>
              </tr>
              <tr v-for="(demand,index) in demands" role="row" class="odd">
                <td tabindex="0"><button type="button" class="btn btn-default btn-sm"
                    @click="deldemand(demand.orderno)"><i class="fas fa-trash"></i></button></td>
                <td><a href="#" onclick="gotoDetail2()" @click="detail(demand.orderno,index)">{{demand.orderno}}</a>
                </td>
                <td>{{demand.category}}{{demand.quality}}</td>
                <td>{{demand.client}}</td>
                <td>{{demand.weight}}</td>
                <td>{{demand.num}}</td>
                <td>{{demand.effect}}</td>
                <td>{{demand.specifications}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </nav>

    </div>

    <!-- 编辑需求单 -->
    <div id="demand3" class="card-body" style="padding: 0px;margin-left: 1%; margin-right: 1%;display: none;">
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <p>编辑需求单</p>
            </a>
          </li>

        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-5">

        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-2">
          <button class="btn btn-primary" @click="update_need(details.orderno)"><i
              class="fas fa-reply nav-icon"></i>&nbsp;提交</button>&nbsp;&nbsp;
          <button type="button" class="btn btn-primary" onclick="gotodemand1()"><i class="fas fa-reply">返回</i></button>
        </ul>

      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light" style="height: 1px;">
        <hr style="height: 0.1px; width: 100%;background-color: lightgray;">
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <i class="fas fa-signal nav-icon"></i>
              <p>基本信息</p>
            </a>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>产品线:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_line1">
              <option>A产品线</option>
              <option>B产品线</option>
              <option>C产品线</option>
            </select>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品类:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_category1">
              <option>玉石</option>
              <option>黄金</option>
              <option>玛瑙</option>
            </select>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>仓库:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_warehousing1">
              <option>A仓库</option>
              <option>B仓库</option>
              <option>C仓库</option>
              <option>D仓库</option>
            </select>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;制单人:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <label style="font-size: 20px;margin: 0px;">{{details.wname}}</label>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar">
          <li class="nav-item d-none d-sm-inline-block">
            <a>审核人:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <label style="font-size: 20px;margin: 0px;">{{details.rname}}</label>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar  ">
          <li class="nav-item d-none d-sm-inline-block">
            <a>成色:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <select class="selectpicker show-tick form-control" style="width: 200px;" v-model="need_quality1">
              <option>千足金9999</option>
              <option>万足金10000</option>
            </select>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
          <li class="nav-item d-none d-sm-inline-block">
            <a>制单时间:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <input type="datetime-local" class="measureDate" style="height: 40px; width: 200px;" v-model="need_time1">
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar">
          <li class="nav-item d-none d-sm-inline-block">
            <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <label style="font-size: 20px;margin: 0px;">{{details.status}}</label>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar  ">
          <li class="nav-item d-none d-sm-inline-block">
            <a>单号:</a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-3">
          <li class="nav-item d-none d-sm-inline-block">
            <label id="orderno1" style="font-size: 20px;margin: 0px;">{{details.orderno}}</label>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <i class="fas fa-signal nav-icon"></i>
              <p>产品信息</p>
            </a>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <div class="col-sm-12">
          <table id="example3" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
            aria-describedby="example1_info">
            <thead class="text-center">
              <tr role="row">
                <th tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending"
                  aria-label="Rendering engine: activate to sort column descending">操作</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Browser: activate to sort column ascending">产品编码</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">产品名称</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">供应商</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">重量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">数量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="CSS grade: activate to sort column ascending">克工艺效果</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="CSS grade: activate to sort column ascending">规格</th>
              </tr>
            </thead>

            <tbody class="text-center">
              <tr v-for="(demand,index) in demands" role="row" class="odd">
                <td tabindex="0" class="sorting_1"><button type="button" class="btn btn-default btn-sm"
                    @click="deldemand(demand.orderno)"><i class="fas fa-trash"></i></button></td>
                <td><a href="#" onclick="gotoDetail3()" @click="detail(demand.orderno,index)">{{demand.orderno}}</a>
                </td>
                <td>{{demand.category}}{{demand.quality}}</td>
                <td>{{demand.client}}</td>
                <td>{{demand.weight}}</td>
                <td>{{demand.num}}</td>
                <td>{{demand.effect}}</td>
                <td>{{demand.specifications}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </nav>
    </div>

    <!-- 需求单详情 -->
    <div id="demand4" class="card-body" style="margin-left: 1%; margin-right: 1%;padding: 0px;display: none;">
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <p>需求单详情</p>
            </a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-4">
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <button type="button" class="btn btn-default" @click="ona()"><i
              class="fas fa-chevron-left">上一条</i></button>&nbsp;&nbsp;
          <button type="button" class="btn btn-default" @click="nexta()"><i
              class="fas fa-chevron-right">下一条</i></button>&nbsp;&nbsp;
          <button type="button" class="btn btn-default" @click="detaill(details.orderno)" onclick="gotoeditor()"><i
              class="fas fa-paint-brush">编辑</i></button>&nbsp;&nbsp;
          <button type="button" class="btn btn-primary" onclick="gotodemand()"><i class="fas fa-reply">返回</i></button>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light" style="height: 1px;">
        <hr style="height: 0.1px; width: 100%;background-color: lightgray;">
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <i class="fas fa-signal nav-icon"></i>
              <p>基本信息</p>
            </a>
          </li>
        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-4">

        </ul>
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <button type="button" class="btn btn-primary" @click="submit()"><i class="fas fa-reply">提交</i></button>
        </ul>
      </nav>
      <div>
        <nav class="navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>产品线:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.line}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;品类:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.category}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>仓库:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative; left: 15px;">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.warehousing}}</label>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;制单人:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.wname}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar">
            <li class="nav-item d-none d-sm-inline-block">
              <a>审核人:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.rname}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar  ">
            <li class="nav-item d-none d-sm-inline-block">
              <a>成色:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.quality}}</label>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar  " style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>制单时间:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.time}}</label>
            </li>
          </ul>


          <ul class="navbar-nav nav-sidebar">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;状态:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.status}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar  ">
            <li class="nav-item d-none d-sm-inline-block">
              <a>单号:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.orderno}}</label>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar" style="margin-left:2%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;重量:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.weight}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative;left: 20px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>数量:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative;left: 20px;">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.num}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar" style="position: relative;left: -40px;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;克工艺效果:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3" style="position: relative;left: -40px;">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.effect}}</label>
            </li>
          </ul>
        </nav>
        <nav class=" navbar navbar-expand navbar-white navbar-light">
          <ul class="navbar-nav nav-sidebar" style="margin-left:1%;">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;供应商:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.client}}</label>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar">
            <li class="nav-item d-none d-sm-inline-block">
              <a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;规格:</a>
            </li>
          </ul>
          <ul class="navbar-nav nav-sidebar col-sm-3">
            <li class="nav-item d-none d-sm-inline-block">
              <label style="font-size: 18px;position: relative;left: 80px;">{{detailss.specifications}}</label>
            </li>
          </ul>
        </nav>
      </div>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav nav-sidebar col-sm-4">
          <li class="nav-item d-none d-sm-inline-block">
            <a class="nav-link">
              <i class="fas fa-signal nav-icon"></i>
              <p>产品信息</p>
            </a>
          </li>
        </ul>
      </nav>
      <nav class=" navbar navbar-expand navbar-white navbar-light">
        <div class="col-sm-12">
          <table id="example4" class="table table-bordered table-striped dataTable dtr-inline" role="grid"
            aria-describedby="example1_info">
            <thead class="text-center">
              <tr role="row">
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Browser: activate to sort column ascending">产品编码</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">产品名称</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">供应商</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">重量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Platform(s): activate to sort column ascending">数量</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="Engine version: activate to sort column ascending">克工艺效果</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="CSS grade: activate to sort column ascending">规格</th>
                <th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1"
                  aria-label="CSS grade: activate to sort column ascending">状态</th>
              </tr>
            </thead>

            <tbody class="text-center">
              <tr v-for="(demand,index) in demands" role="row" class="odd">
                <td tabindex="0" class="sorting_1"><a href="#" onclick="gotoDetail3()"
                    @click="detail(demand.orderno,index)">{{demand.orderno}}</a>
                </td>
                <td>{{demand.category}}{{demand.quality}}</td>
                <td>{{demand.client}}</td>
                <td>{{demand.weight}}</td>
                <td>{{demand.num}}</td>
                <td>{{demand.effect}}</td>
                <td>{{demand.specifications}}</td>
                <td>{{demand.status}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </nav>
    </div>
    <script type="text/javascript">
      var ttindex = 0;
      var ttstatus = null;
      var count=0;
      new Vue({
        el: "#all_one",
        data: {
          demands: [],
          details: [],
          detailss: [],
          warehousing:[],
          warehouse:[],
          // 新增需求单
          need_specifications: "",
          need_effect: "",
          need_line: "",
          need_client: "",
          need_category: "",
          need_weight: "",
          need_num: "",
          need_rname: "",
          need_wname: "",
          need_orderno: "",
          need_status: "",
          need_storehouse: "",
          need_quality: "",
          need_time: "",
          need_department: "",
          //编辑需求单
          need_line1: "",
          need_category1: "",
          need_quality1: "",
          need_warehousing1: "",
          need_time1: ""
        },
        created() {
          axios
            .get('demand/findDemand')
            .then(res => {
              //console.info(res.data);
              this.demands = res.data;
            })
        },
        mounted(){
        	axios
            .get('demand/findWarehousing')
            .then(res => {
              console.info(res.data);
              
              this.warehousing=res.data;
              for(var i=0;i<this.warehousing.length;i++){
            	  this.warehouse[i]= this.warehousing[i].num;
            	  count=count+this.warehouse[i];
              }
              alert("库存只有"+count+"请添加需求单，及时补充库存");
              
            })
        },
        methods: {
          detail: function (demandorder, index) {
            ttindex = index;
            this.detailss = this.demands[index];
            ttstatus = this.demands[index].status;
            axios
              .get("demand/findDetailByOrderno", {
                params: {
                  orderno: demandorder
                }
              })
              .then(res => {
                //console.info(res.data)
                this.details = res.data;
              })
          },
          detaill: function (demandorder) {
            axios
              .get("demand/findDetailByOrderno", {
                params: {
                  orderno: demandorder
                }
              })
              .then(res => {
                //console.info(res.data)
                this.details = res.data;
              })
          },
          add_need: function () {
            if (this.need_orderno == "" || this.need_line == "" || this.need_category == "" || this.need_storehouse == "" || this.need_weight == "" || this.need_num == "" || this.need_quality == "" || this.need_time == "" || this.need_status == "" || this.need_wname == "" || this.need_rname == "" || this.need_client == "" || this.need_department == "" || this.need_effect == "" || this.need_specifications == "") {
              alert("请填写完整，不能为空");
            }else{
              axios
              .get("demand/insert", {
                params: {
                  orderno: this.need_orderno,
                  line: this.need_line,
                  category: this.need_category,
                  warehousing: this.need_storehouse,
                  weight: this.need_weight,
                  num: this.need_num,
                  quality: this.need_quality,
                  time: this.need_time,
                  status: this.need_status,
                  wname: this.need_wname,
                  rname: this.need_rname,
                  client: this.need_client,
                  department: this.need_department,
                  effect: this.need_effect,
                  specifications: this.need_specifications
                }
              })
              .then(res => {
                alert(res.data.message);
              })
            }
          },
          update_need: function (detailsorderno) {

            axios
              .get("demand/updateDemandByOrderno", {
                params: {
                  line: this.need_line1,
                  category: this.need_category1,
                  quality: this.need_quality1,
                  warehousing: this.need_warehousing1,
                  time: this.need_time1,
                  orderno: detailsorderno
                }
              })
              .then(res => {
                alert(res.data.message);
              })
          },
          ona: function () {
            ttindex = ttindex - 1;
            if (ttindex < 0) {
              ttindex = 0;
              alert("已经是第一条了");
            }
            this.detailss = this.demands[ttindex];
            //console.info(this.detailss);
          },
          nexta: function () {
            ttindex = ttindex + 1;
            if (ttindex > this.demands.length - 1) {
              ttindex = this.demands.length - 1;
              alert("已经是最后一条了");
            }
            this.detailss = this.demands[ttindex];
            //console.info(this.detailss);
          },
          deldemand: function (delorderno) {
            axios
              .get("demand/delDemandByOrderno", {
                params: {
                  orderno: delorderno
                }
              })
              .then(res => {
                alert(res.data.message);
                var dds = this.demands;
                if (res.data.message == "删除成功") {
                  for (var i = 0; i < dds.length; i++) {
                    var b = dds[i];
                    if (b.orderno == delorderno) {
                      dds.splice(i, 1);
                      //重新赋值
                      this.dds = dds;
                      break;
                    }
                  }
                }
              })
          },
          submit: function () {
            axios
              .get("demand/insertTodisRequirements", {
                params: {
                  orderno: this.demands[ttindex].orderno,
                  supplier: this.demands[ttindex].client,
                  department: this.demands[ttindex].department,
                  weight: this.demands[ttindex].weight,
                  num: this.demands[ttindex].num,
                  wname: this.demands[ttindex].wname,
                  rname: this.demands[ttindex].rname,
                  time: this.demands[ttindex].time,
                  status: "待采购",
                  line: this.demands[ttindex].line,
                  category: this.demands[ttindex].category,
                  storehome: this.demands[ttindex].warehousing,
                  quality: this.demands[ttindex].quality
                }
              })
              .then(res => {
                alert(res.data.message);
              }),
              axios
                .get("demand/changeStatus", {
                  params: {
                    orderno: this.demands[ttindex].orderno,
                    status: "已分配"
                  }
                })
                .then(res => {
                  alert(res.data.message);
                })
          }
        }
      });
      function gotoDetail() {
        document.getElementById("demand1").style.display = "none";
        document.getElementById("demand4").style.display = "";
      }
      function gotoDetail2() {
        document.getElementById("demand2").style.display = "none";
        document.getElementById("demand4").style.display = "";
      }
      function gotoDetail3() {
        document.getElementById("demand3").style.display = "none";
        document.getElementById("demand4").style.display = "";
      }
      function gotoeditor() {
        if (ttstatus == "已分配" || ttstatus == "已完成") {
          alert("订单" + ttstatus + "，请勿修改");
        } else {
          document.getElementById("demand4").style.display = "none";
          document.getElementById("demand3").style.display = "";
        }

      }
      function gotodemand() {
        window.location.href = "/demand.html";
      }
      function gotodemand1() {
        window.location.href = "/demand.html";
      }
      function adddemand() {
        document.getElementById("demand1").style.display = "none";
        document.getElementById("demand2").style.display = "";
      }
      function goneed() {
        window.location.href = "/demand.html";
      }
    </script>
    <!-- /.content-wrapper -->

  </div>
  <!-- ./wrapper -->

  <!-- REQUIRED SCRIPTS -->
  <!-- jQuery -->
  <script src="plugins/jquery/jquery.min.js"></script>

  <!-- Bootstrap -->
  <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- AdminLTE -->
  <script src="dist/js/adminlte.js"></script>

  <!-- OPTIONAL SCRIPTS -->
  <script src="plugins/chart.js/Chart.min.js"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="dist/js/demo.js"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="dist/js/pages/dashboard3.js"></script>

  <script src="plugins/datatables/jquery.dataTables.min.js"></script>
  <script src="plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
  <script src="plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
  <script src="plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
  <script src="dist/js/adminlte.min.js"></script>
  <script src="build/js/Blob.js"></script>
  <script src="build/js/FileSaver.js"></script>
  <script src="build/js/tableExport.js"></script>
  <script>
    var $exportLink = document.getElementById('export');
    $exportLink.addEventListener('click', function (e) {
      e.preventDefault();
      if (e.target.nodeName === "A") {
        tableExport('example1', 'Erp需求单', e.target.getAttribute('data-type'));
      }
    }, false);
  </script>
  <script>
    $(function () {
      $("#example1").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $("#example2").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $("#example3").DataTable({
        "responsive": true,
        "autoWidth": false,
      });
      $("#example4").DataTable({
        "responsive": true,
        "autoWidth": false,
      });


    });
  </script>
</body>

</html>